<template>
	<view class="conbox">
		<view class="flex-row wrap" v-if="props.list.length">
			<view v-for="(v,i) in props.list" :key="i" class="proitem flex-column pd30-column" :id="`proitem_${i+1}`" @click="proxy.$c.go_url(`/pages/proSup/companyProducts?id=${v.company_id}&name=${v.name}`)">
				<view class="combox flex-row mb20">
					<view class="imgbox ml30"> <image src="../../static/42.png" mode="aspectFill"></image> </view>
					<view class="flex-column">
						<view class="name mb10">{{v.name}}</view>
						<view class="flex-row-center">
							<image class="descicon" src="../../static/43.png" mode="widthFix"></image>
							<text class="desc">河北 安平 17年经营经验</text>
						</view>
						<view class="desc">提供质保服务 深度定制</view>
					</view>
					<image class="tuijian" src="../../static/44.png" mode="aspectFill"></image>
				</view>
				<view class="flex-row pd30-row">
					<view class="pro flex-column" v-for="(v,i) in obj.prolist" :key="i" @click.stop="proxy.$c.go_url(`/pages/productDetail?id=${v.product_id}&size_id=${v.size_id}`)">
						<view class="coverbox"><image class="cover" :src="v.imgs.cover" mode="aspectFill"></image></view>
						<view class="pd20-column">
							<view class="itemtitle lineOne">{{v.title}}</view>
							<view class="price" v-if="v.price">
								<text>¥{{v.price}}</text>
								<text class="desc">元/{{v.unit_}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="!props.list.length" class="pd30"><view class="nodata">暂无数据</view></view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted } from 'vue'
	import { onLoad,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll } from '@dcloudio/uni-app';
	import dayjs from 'dayjs'
    let { proxy } = getCurrentInstance()
	const props = defineProps({
		list: {
			type: Array,
			default: ()=>{
				return []
			}
		}
	})
	
	let obj = reactive({
		list: [],
		req: {
			"company_id": 1,
			"sort": 0,
			"key": "",
			"mesh_max": "",
			"mesh_min": "",
			"wire_diameter_max": "",
			"wire_diameter_min": "",
			"aperture": "",
			"length_max": "",
			"length_min": "",
			"width_max": "",
			"width_min": "",
			"material": "",
			"weaving_type": "",
			"tag_scene": "",
			"tag_industry": "",
			"tag_product": "",
			"currentpage": 1,
			"pagesize": 3
		},
		prolist: []
	})
	
	onMounted(()=>{
		init()
	})
	
	const init=()=>{
		proxy.$reQuest.post('mp/product/list',obj.req,{token: true},).then(d=>{
			if(d.success&&d.msg.list){
				obj.prolist = d.msg.list||[]
				 obj.prolist.map(e=>{
					 e.price = ''
					 if(e.preferential&&e.preferential.length){
						const o1 = e.preferential.find(ev=>ev.unit=='平方米')
						const o2 = e.preferential.find(ev=>ev.unit=='米')
						const o3 = e.preferential.find(ev=>ev.unit=='张')
						const o4 = e.preferential.find(ev=>ev.unit=='卷')
						e.price = o1 ? o1.special_price : (o2 ? o2.special_price : (o3 ? o3.special_price : (o4 ? o4.special_price : '')))
						e.unit_ = o1 ? `平方米` : (o2 ? `米` : (o3 ? `张` : (o4 ? `卷` : '')))
					 }
				 })
			}
		}).catch(err=>{resovle({})})
	}
</script>

<style lang="scss" scoped>
.conbox{
	width: 100%;background-color: #f0f0f0;
	.proitem{
		position: relative;
		width: 100vw;background-color: #fff;margin-bottom: 30rpx;
		.combox{
			position: relative;
			.imgbox{width: 120rpx;height: 120rpx; margin-right: 20rpx; image{width: 100rpx;height: 100rpx;}}
			.name{font-size: 27rpx;font-weight: bold;color: #111111;}
			.descicon{width: 80rpx;}
			.desc{font-size: 22rpx;font-weight: 500;color: #333;}
			.tuijian{position: absolute;right: 0;top: 0;z-index: 1;width: 88rpx;height: 88rpx;}
		}
		.pro{
			width: 220rpx;margin-right: 15rpx;
			.coverbox{width: 220rpx;height: 220rpx;background-color: #f0f0f0;border-radius: 20rpx;overflow: hidden;image{width: 220rpx;height: 220rpx;}}
			.cover{width: 100%;height: 100%;}
			.itemtitle{font-size: 22rpx;color: #333;font-weight: 400;}
			.price{
				font-size: 38rpx;color: #333;font-weight: bold;
				.desc{font-size: 26rpx;font-weight: 400;color: #999;margin-left: 5rpx;}
			}
			.min_nums{font-size: 27rpx;color: #333;font-weight: 400;}
		}
		.pro:nth-child(3n){margin-right: 0;}
	}
	.proitem:nth-child(2n){margin-right: 0;}
	.nodata{width: 100%;height: 100rpx;text-align: center;line-height: 100rpx;border-radius: 10rpx;background: #f0f0f0;font-size: 22rpx;color: #999;}
}
</style>
